<template>
	<div v-show="showpage" class="sort_page zoomIn" :style="{'background':pageData.ranking_bgcolor || '#FE7F00'}">
		<div class="top-image">
			<img :src="pageData.ranking_banner" />
		</div>
		<div class="container">
			<div class="tab">
				<div :class="{'tab-select':tabSelect==1}" @click="changeTab(1)">{{pageData.vote_unit}}数榜</div>
				<!-- <div :class="{'tab-select':tabSelect==2}" @click="changeTab(2)">礼物</div> -->
			</div>
			<div class="lists" v-if="listData.length>0">
				<div class="list"  v-for="(item,index) in listData">
					<span v-if="index>2" class="id">{{item.id_text}}</span>
					<div v-else class="sort_id">
						<img :src="require(`@/static/vote/sort_${index+1}.png`)" alt="">
					</div>
					<div class="avatar">
						<!-- <img :src="item.attaches[0].url || ''" alt=""/> -->
						<image :src="checkType(item.attaches[0].url)=='image'?item.attaches[0].url:item.attaches[0].url+'?vframe/jpg/offset/1'" mode="aspectFill"/>
					</div>
					<div class="tab2">
						<span class="name">{{item.name}}</span>
						<span class="time"><span style="color: #70B42B;" :style="{color:pageData.button_color}">{{item.quali==1?item.stats.first_num:item.stats.last_num}}</span>{{pageData.vote_unit}}</span>
					</div>
					<div v-if="pageData.vote_open_reg" class="btn" @click="next(tabSelect,item)" :style="{background:pageData.button_color,color: pageData.button_font_color}">{{tabSelect==1?pageData.vote_button:'送礼'}}</div>
				</div>
			</div>
			<div v-if=" listData.length==0" class="end-text" style="font-size: 30rpx; text-align: center;width:100%;height: 100rpx;">
				敬请期待更多玩家冲榜···
			</div>
		</div>
		<view class="back_home">
			<img src="~@/static/vote/back_home.png" @click="backHome"></img>
		</view>
	</div>
</template>

<script>
	import{  getRank,ActivityInfo ,chance} from '@/api/api.js'
	import { isWeiXin , isQianfan,proxyShareFun,countNumAnswer,checkImage, } from '@/until/QFH5.js'
	import { mapGetters } from 'vuex'
	import {formatTime} from '@/until/tool'
	export default{
		data(){
			return{
				tabSelect:1,
				actid:'',
				listData:[
				 
				],
				userSort:'*',
				userInfo:{},
				userNum:0,
				updateTime:'',
				plugin:'',
				type:'',
				
				showpage:true,
				pageData:'',
				chance:''
			}
		},
		computed: {
			comText() {
				if(this.tabSelect==1) return '分'
				return '次'
			},
			...mapGetters(['loginInfo','siteinfo','activityType','activityName'])
		},
		methods: {
			backHome(){
				let url ="/plugin/pages/index?type=vote&plugin=vote&id="+this.actid
				this.$navigateTo({ url:url})
			},
			checkType(val){
			     return this.$checkType(val)
			},
			next(val,data){
				if(val==2){
					let url ='/plugin/pages/vote/gift?work_id='+data.id+"&actid="+this.actid+"&name="+data.name
					this.$navigateTo({ url:url})
				}else{
					let url ='/plugin/pages/vote/detail?work_id='+data.id+"&id="+this.actid
					this.$navigateTo({ url:url})
				}
			},
			formatTimeStr(val){
				return formatTime(val)
			},
			changeTab(val){
				this.tabSelect = val
			},
			formatImage(val){
				if(val==2)return 1
				if(val==1)return 2
				return val
			},
			initData(){
				let obj = {actid:this.actid,rank_type:this.tabSelect}
				if(this.$route.query.hasOwnProperty('plugin')){
					obj.plugin = this.$route.query.plugin
				}
				 let p1 = ActivityInfo({actid:this.actid},'vote','vote') 
				 let p2 = getRank(obj,'vote','vote')
				 Promise.all([p2,p1]).then((resAll)=>{
					let res = resAll[0]
					this.pageData = resAll[1].data.settings
					this.showpage = true
					if(res.code==0){
						let list = res.data
						if(list.length> this.pageData.ranking_limit){
							list.splice(0,this.pageData.ranking_limit)
						}
						list.forEach((item,index)=>{
							item.id_text = index+1>9?index+1:'0'+(index+1)
						})
						this.listData = list
					}else{
						uni.showToast({
							title:res.text,
							icon:'none'
						})
					}					
				})
				
			},
		},
		mounted() {
			this.initData()
			this.$setTitle('排行榜')
			let data =  {title:'排行榜',image:this.siteinfo.qiniu_url+'/work_file_/sorts_top_image.png',desc:'快来加入我们，大家一起冲冲冲！'}
			proxyShareFun(data.title,data.image,data.desc,window.location.href)
		},
		onLoad(op){
			this.actid = op.id
			// countNumAnswer(this.actid)
			this.$store.commit('SETACTIVITYNAME', 'vote')
			this.$store.commit('SETACTIVITYTYPE', 'vote')
		},
		destroyed(){
			let data =  this.pageData
			let url = window.location.origin+'/plugin-view/?type=vote&plugin=vote&id='+this.actid
			proxyShareFun(data.title, data.image, data.desc, url)
		}
	}
</script>

<style scoped lang="scss">
	.back_home{
		position: fixed;
		left: 0rpx;
		bottom: 441rpx;
		z-index: 11;
		img{
			width: 122rpx;
			height: 122rpx;
		}
	}
	.sort_page{
		/* background-color: #2471FD; */
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		position: relative;
	}
	.top-image{
		line-height: 0;
	}
	.top-image img{
		width: 750rpx;
		min-height: 418rpx;
		max-height: 750rpx;
	}
	.container{
		width: 694rpx;
		border-radius: 30rpx;
		margin: -46rpx auto 0;
		background-color: #fff;
		position: relative;
		z-index: 9;
		padding-bottom: 1rpx;
	}
	.container .tab{
		display: flex;
		justify-content: center;
		height: 89rpx;
		padding-top: 23rpx;
	}
	.tab div{
		position: relative;
		margin: 0 20rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #666;
	}
	.tab-select{
		color: #222 !important;
	}
	.tab-select::after{
		content: "";
		position: absolute;
		left: 50%;
		bottom: -16rpx;
		transform: translateX(-50%);
		width: 30rpx;
		height:6rpx;
		border-radius: 3rpx;
		background-color: #2776F9;
	}
	.lists{
		margin-top: 30rpx;
		padding:  0 0 30rpx 0;
	}
	.list{
		width: 632rpx;
		padding:  0 30rpx;
		margin-bottom: 30rpx;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		font-family: SF Pro Display-Bold, SF Pro Display;
		font-weight: bold;
		color: #222222;
	}
	.list .id{
		/* margin-left: .3rpx; */
		width: 52rpx;
		text-align: center;
	}
	.list .sort_id{
		 width:52rpx;
		 height: 52rpx;
		 line-height: 0;
		 img{
			 width:52rpx;
			 height: 52rpx;
		 }
	}
	.list .avatar{
		margin-left: 34rpx;
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
		border: 2rpx solid #FF3D51;
		padding: 5rpx;
	
	}
	.list .avatar image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.list .tab2{
		margin-left: 20rpx;
		width: 302rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		&>span{
			height: 42rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
		}
		.name{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: block;
			width: 410rpx;
		}
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
	}
	.list .btn{
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #70B42B;
		border-radius: 30rpx  ;
		
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}
	.end-text{
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-bottom: 40rpx;
	}
	
</style>